<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>物联网数据平台 - 智能监控管理系统</title>
    
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- FontAwesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- 自定义样式 -->
    <style>
        .sidebar-transition {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .menu-item-hover {
            transition: all 0.2s ease-in-out;
        }
        
        .menu-item-hover:hover {
            transform: translateX(4px);
        }
        
        .content-fade-in {
            animation: fadeIn 0.3s ease-in-out;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .glass-effect {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        .gradient-bg-secondary {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }
        
        .gradient-bg-success {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        }
        
        .gradient-bg-warning {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
        }
    </style>
</head>
<body class="bg-gray-50 font-sans">
    <div class="flex h-screen">
        <!-- 左侧导航栏 -->
        <div id="sidebar" class="w-64 bg-gradient-to-b from-slate-800 to-slate-900 text-white sidebar-transition">
            <!-- Logo区域 -->
            <div class="p-6 border-b border-slate-700">
                <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 bg-blue-500 rounded-lg flex items-center justify-center">
                        <i class="fas fa-microchip text-white text-xl"></i>
                    </div>
                    <div>
                        <h1 class="text-xl font-bold text-white">IoT Platform</h1>
                        <p class="text-sm text-slate-400">智能监控管理系统</p>
                    </div>
                </div>
            </div>
            
            <!-- 导航菜单 -->
            <nav class="mt-6 px-4">
                <!-- 系统管理 -->
                <div class="mb-4">
                    <div class="menu-group-header flex items-center justify-between px-3 py-2 text-slate-400 text-sm font-medium uppercase tracking-wider cursor-pointer" onclick="toggleMenu('system')">
                        <span><i class="fas fa-cogs mr-2"></i>系统管理</span>
                        <i class="fas fa-chevron-down text-xs transition-transform" id="system-arrow"></i>
                    </div>
                    <div id="system-menu" class="ml-4 space-y-1">
                        <a href="#" class="menu-item flex items-center px-3 py-2 text-slate-300 rounded-lg hover:bg-slate-700 menu-item-hover" onclick="loadContent('user')">
                            <i class="fas fa-users mr-3 w-4 text-center"></i>
                            用户管理
                        </a>
                        <a href="#" class="menu-item flex items-center px-3 py-2 text-slate-300 rounded-lg hover:bg-slate-700 menu-item-hover" onclick="loadContent('sensor')">
                            <i class="fas fa-sliders-h mr-3 w-4 text-center"></i>
                            传感器参数
                        </a>
                    </div>
                </div>
                
                <!-- 设备管理 -->
                <div class="mb-4">
                    <div class="menu-group-header flex items-center justify-between px-3 py-2 text-slate-400 text-sm font-medium uppercase tracking-wider cursor-pointer" onclick="toggleMenu('device')">
                        <span><i class="fas fa-network-wired mr-2"></i>设备管理</span>
                        <i class="fas fa-chevron-down text-xs transition-transform" id="device-arrow"></i>
                    </div>
                    <div id="device-menu" class="ml-4 space-y-1">
                        <a href="#" class="menu-item flex items-center px-3 py-2 text-slate-300 rounded-lg hover:bg-slate-700 menu-item-hover" onclick="loadContent('device-list')">
                            <i class="fas fa-hdd mr-3 w-4 text-center"></i>
                            设备管理
                        </a>
                        <a href="#" class="menu-item flex items-center px-3 py-2 text-slate-300 rounded-lg hover:bg-slate-700 menu-item-hover" onclick="loadContent('realtime')">
                            <i class="fas fa-chart-line mr-3 w-4 text-center"></i>
                            实时数据
                        </a>
                    </div>
                </div>
                
                <!-- 数据管理 -->
                <div class="mb-4">
                    <div class="menu-group-header flex items-center justify-between px-3 py-2 text-slate-400 text-sm font-medium uppercase tracking-wider cursor-pointer" onclick="toggleMenu('data')">
                        <span><i class="fas fa-database mr-2"></i>数据管理</span>
                        <i class="fas fa-chevron-down text-xs transition-transform" id="data-arrow"></i>
                    </div>
                    <div id="data-menu" class="ml-4 space-y-1">
                        <a href="#" class="menu-item flex items-center px-3 py-2 text-slate-300 rounded-lg hover:bg-slate-700 menu-item-hover" onclick="loadContent('history')">
                            <i class="fas fa-history mr-3 w-4 text-center"></i>
                            历史数据查询
                        </a>
                        <a href="#" class="menu-item flex items-center px-3 py-2 text-slate-300 rounded-lg hover:bg-slate-700 menu-item-hover" onclick="loadContent('charts')">
                            <i class="fas fa-chart-bar mr-3 w-4 text-center"></i>
                            数据图表
                        </a>
                    </div>
                </div>
            </nav>
            

        </div>
        
        <!-- 右侧内容区域 -->
        <div class="flex-1 flex flex-col">
            <!-- 顶部工具栏 -->
            <header class="bg-white shadow-sm border-b border-gray-200 px-6 py-4">
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-4">
                        <button id="sidebar-toggle" class="text-gray-500 hover:text-gray-700 transition-colors" onclick="toggleSidebar()">
                            <i class="fas fa-bars text-xl"></i>
                        </button>
                        <div class="text-sm text-gray-500">
                            <span id="breadcrumb">首页</span>
                        </div>
                    </div>
                    <div class="flex items-center space-x-4">
                        <!-- 通知按钮 -->
                        <button class="relative text-gray-500 hover:text-gray-700 transition-colors">
                            <i class="fas fa-bell text-xl"></i>
                            <span class="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full"></span>
                        </button>
                        
                        <!-- 设置按钮 -->
                        <button class="text-gray-500 hover:text-gray-700 transition-colors">
                            <i class="fas fa-cog text-xl"></i>
                        </button>
                        
                        <!-- 用户信息下拉菜单 -->
                        <div class="relative">
                            <button onclick="toggleUserMenu()" class="flex items-center space-x-3 text-gray-700 hover:text-gray-900 transition-colors focus:outline-none">
                                <div class="w-8 h-8 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center">
                                    <i class="fas fa-user text-white text-sm"></i>
                                </div>
                                <div class="hidden md:block text-left">
                                    <p class="text-sm font-medium text-gray-900">管理员</p>
                                    <p class="text-xs text-gray-500">系统管理员</p>
                                </div>
                                <i class="fas fa-chevron-down text-xs text-gray-400 transition-transform" id="userMenuArrow"></i>
                            </button>
                            
                            <!-- 用户下拉菜单 -->
                            <div id="userMenu" class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 py-2 hidden z-50">
                                <div class="px-4 py-3 border-b border-gray-100">
                                    <p class="text-sm font-medium text-gray-900">管理员</p>
                                    <p class="text-xs text-gray-500">admin@iot.com</p>
                                </div>
                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition-colors">
                                    <i class="fas fa-user mr-3 w-4 text-center"></i>
                                    个人资料
                                </a>
                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition-colors">
                                    <i class="fas fa-cog mr-3 w-4 text-center"></i>
                                    账户设置
                                </a>
                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition-colors">
                                    <i class="fas fa-shield-alt mr-3 w-4 text-center"></i>
                                    安全设置
                                </a>
                                <div class="border-t border-gray-100 my-1"></div>
                                <a href="#" onclick="logout()" class="block px-4 py-2 text-sm text-red-600 hover:bg-red-50 transition-colors">
                                    <i class="fas fa-sign-out-alt mr-3 w-4 text-center"></i>
                                    退出登录
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </header>
            
            <!-- 主内容区域 -->
            <main class="flex-1 p-6 overflow-auto">
                <div id="content-area" class="content-fade-in">
                    <!-- 默认首页内容 -->
                    <div class="max-w-7xl mx-auto">
                        <!-- 欢迎区域 -->
                        <div class="gradient-bg rounded-2xl p-8 text-white mb-8">
                            <div class="flex items-center justify-between">
                                <div>
                                    <h1 class="text-4xl font-bold mb-4">欢迎使用物联网数据平台</h1>
                                    <p class="text-xl text-blue-100 mb-6">实时监控、智能分析、数据驱动决策</p>
                                    <div class="flex space-x-4">
                                        <button class="bg-white bg-opacity-20 hover:bg-opacity-30 px-6 py-3 rounded-lg transition-all duration-200 backdrop-blur-sm">
                                            <i class="fas fa-play mr-2"></i>快速开始
                                        </button>
                                        <button class="border border-white border-opacity-30 hover:bg-white hover:bg-opacity-10 px-6 py-3 rounded-lg transition-all duration-200">
                                            <i class="fas fa-book mr-2"></i>使用文档
                                        </button>
                                    </div>
                                </div>
                                <div class="hidden lg:block">
                                    <i class="fas fa-microchip text-8xl text-white text-opacity-20"></i>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 统计卡片 -->
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                            <div class="gradient-bg rounded-xl p-6 text-white">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="text-blue-100 text-sm">总用户数</p>
                                        <p class="text-3xl font-bold">156</p>
                                    </div>
                                    <div class="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
                                        <i class="fas fa-users text-2xl"></i>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="gradient-bg-secondary rounded-xl p-6 text-white">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="text-pink-100 text-sm">在线设备</p>
                                        <p class="p-3xl font-bold">89</p>
                                    </div>
                                    <div class="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
                                        <i class="fas fa-hdd text-2xl"></i>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="gradient-bg-success rounded-xl p-6 text-white">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="text-cyan-100 text-sm">传感器</p>
                                        <p class="text-3xl font-bold">342</p>
                                    </div>
                                    <div class="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
                                        <i class="fas fa-sliders-h text-2xl"></i>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="gradient-bg-warning rounded-xl p-6 text-white">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="text-green-100 text-sm">数据记录</p>
                                        <p class="text-3xl font-bold">1.2M</p>
                                    </div>
                                    <div class="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
                                        <i class="fas fa-chart-line text-2xl"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 功能模块 -->
                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                            <div class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow">
                                <div class="text-center">
                                    <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                                        <i class="fas fa-users text-2xl text-blue-600"></i>
                                    </div>
                                    <h3 class="text-xl font-semibold text-gray-800 mb-2">用户管理</h3>
                                    <p class="text-gray-600 mb-4">管理系统用户，设置权限和角色</p>
                                    <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg transition-colors" onclick="loadContent('user')">
                                        进入管理
                                    </button>
                                </div>
                            </div>
                            
                            <div class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow">
                                <div class="text-center">
                                    <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                                        <i class="fas fa-sliders-h text-2xl text-green-600"></i>
                                    </div>
                                    <h3 class="text-xl font-semibold text-gray-800 mb-2">传感器参数</h3>
                                    <p class="text-gray-600 mb-4">配置传感器参数和阈值设置</p>
                                    <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg transition-colors" onclick="loadContent('sensor')">
                                        进入管理
                                    </button>
                                </div>
                            </div>
                            
                            <div class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow">
                                <div class="text-center">
                                    <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
                                        <i class="fas fa-hdd text-2xl text-purple-600"></i>
                                    </div>
                                    <h3 class="text-xl font-semibold text-gray-800 mb-2">设备管理</h3>
                                    <p class="text-gray-600 mb-4">管理物联网设备，监控设备状态</p>
                                    <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg transition-colors" onclick="loadContent('device-list')">
                                        进入管理
                                    </button>
                                </div>
                            </div>
                            
                            <div class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow">
                                <div class="text-center">
                                    <div class="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-4">
                                        <i class="fas fa-chart-bar text-2xl text-orange-600"></i>
                                    </div>
                                    <h3 class="text-xl font-semibold text-gray-800 mb-2">数据管理</h3>
                                    <p class="text-gray-600 mb-4">查看实时数据，分析历史趋势</p>
                                    <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg transition-colors" onclick="loadContent('realtime')">
                                        进入管理
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <!-- JavaScript -->
    <script>
        // 菜单展开/收起
        function toggleMenu(menuId) {
            const menu = document.getElementById(menuId + '-menu');
            const arrow = document.getElementById(menuId + '-arrow');
            
            if (menu.style.display === 'none') {
                menu.style.display = 'block';
                arrow.style.transform = 'rotate(180deg)';
            } else {
                menu.style.display = 'none';
                arrow.style.transform = 'rotate(0deg)';
            }
        }
        
        // 侧边栏切换
        function toggleSidebar() {
            const sidebar = document.getElementById('sidebar');
            const isCollapsed = sidebar.classList.contains('w-16');
            
            if (isCollapsed) {
                sidebar.classList.remove('w-16');
                sidebar.classList.add('w-64');
            } else {
                sidebar.classList.remove('w-64');
                sidebar.classList.add('w-16');
            }
        }
        
        // 用户菜单切换
        function toggleUserMenu() {
            const userMenu = document.getElementById('userMenu');
            const userMenuArrow = document.getElementById('userMenuArrow');
            
            if (userMenu.classList.contains('hidden')) {
                userMenu.classList.remove('hidden');
                userMenuArrow.style.transform = 'rotate(180deg)';
            } else {
                userMenu.classList.add('hidden');
                userMenuArrow.style.transform = 'rotate(0deg)';
            }
        }
        
        // 点击其他地方关闭用户菜单
        document.addEventListener('click', function(event) {
            const userMenu = document.getElementById('userMenu');
            const userMenuButton = event.target.closest('[onclick="toggleUserMenu()"]');
            
            if (!userMenuButton && !userMenu.contains(event.target)) {
                userMenu.classList.add('hidden');
                const userMenuArrow = document.getElementById('userMenuArrow');
                if (userMenuArrow) {
                    userMenuArrow.style.transform = 'rotate(0deg)';
                }
            }
        });
        
        // 加载内容
        function loadContent(page) {
            const contentArea = document.getElementById('content-area');
            const breadcrumb = document.getElementById('breadcrumb');
            
            // 更新面包屑
            const pageNames = {
                'user': '系统管理 > 用户管理',
                'sensor': '系统管理 > 传感器参数',
                'device-list': '设备管理 > 设备管理',
                'realtime': '设备管理 > 实时数据',
                'history': '数据管理 > 历史数据查询',
                'charts': '数据管理 > 数据图表'
            };
            
            breadcrumb.textContent = pageNames[page] || '首页';
            
            // 根据页面类型加载不同内容
            if (page === 'user') {
                // 加载用户管理页面
                contentArea.innerHTML = `
                    <div class="max-w-7xl mx-auto fade-in">
                        <!-- 页面标题 -->
                        <div class="mb-8">
                            <div class="flex items-center justify-between">
                                <div>
                                    <h1 class="text-3xl font-bold text-gray-900 mb-2">用户管理</h1>
                                    <p class="text-gray-600">管理系统用户，设置权限和角色</p>
                                </div>
                                <div class="flex space-x-3">
                                    <button onclick="exportUsers()" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-lg shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors">
                                        <i class="fas fa-download mr-2"></i>
                                        导出Excel
                                    </button>
                                    <button onclick="showAddUserModal()" class="inline-flex items-center px-4 py-2 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white btn-primary hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all">
                                        <i class="fas fa-plus mr-2"></i>
                                        添加用户
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 搜索和筛选区域 -->
                        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
                            <div class="flex flex-col md:flex-row md:items-center md:justify-between space-y-4 md:space-y-0">
                                <div class="flex-1 max-w-md">
                                    <div class="relative">
                                        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                            <i class="fas fa-search text-gray-400"></i>
                                        </div>
                                        <input type="text" id="searchKeyword" placeholder="搜索用户名、真实姓名、邮箱或手机号" 
                                               class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
                                    </div>
                                </div>
                                <div class="flex items-center space-x-3">
                                    <button onclick="searchUsers()" class="inline-flex items-center px-4 py-2 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors">
                                        <i class="fas fa-search mr-2"></i>
                                        搜索
                                    </button>
                                    <button onclick="clearSearch()" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-lg shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors">
                                        <i class="fas fa-times mr-2"></i>
                                        清除
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 用户列表 -->
                        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
                            <div class="overflow-x-auto">
                                <table class="min-w-full divide-y divide-gray-200">
                                    <thead class="bg-gray-50">
                                        <tr>
                                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">用户信息</th>
                                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">联系方式</th>
                                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">创建时间</th>
                                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                                        </tr>
                                    </thead>
                                    <tbody id="userTableBody" class="bg-white divide-y divide-gray-200">
                                        <!-- 用户数据将通过JavaScript动态加载 -->
                                    </tbody>
                                </table>
                            </div>
                            
                            <!-- 分页 -->
                            <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
                                <div class="flex-1 flex justify-between sm:hidden">
                                    <button onclick="loadUsers(currentPage - 1)" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                                        上一页
                                    </button>
                                    <button onclick="loadUsers(currentPage + 1)" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                                        下一页
                                    </button>
                                </div>
                                <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                                    <div>
                                        <p class="text-sm text-gray-700">
                                            显示第 <span class="font-medium">1</span> 到 <span class="font-medium">10</span> 条，共 <span class="font-medium" id="totalRecords">0</span> 条记录
                                        </p>
                                    </div>
                                    <div>
                                        <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" id="pagination">
                                            <!-- 分页按钮将通过JavaScript动态生成 -->
                                        </nav>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                `;
                
                // 加载用户数据
                loadUsers();
                
            } else if (page === 'sensor') {
                // 加载传感器参数页面
                contentArea.innerHTML = `
                    <div class="max-w-7xl mx-auto fade-in">
                        <div class="text-center py-12">
                            <i class="fas fa-sliders-h text-6xl text-gray-300 mb-4"></i>
                            <h2 class="text-2xl font-semibold text-gray-700 mb-2">传感器参数管理</h2>
                            <p class="text-gray-500">配置传感器参数和阈值设置</p>
                            <p class="text-sm text-gray-400 mt-2">此功能正在开发中...</p>
                        </div>
                    </div>
                `;
                
            } else if (page === 'device-list') {
                // 加载设备管理页面
                contentArea.innerHTML = `
                    <div class="max-w-7xl mx-auto fade-in">
                        <div class="text-center py-12">
                            <i class="fas fa-hdd text-6xl text-gray-300 mb-4"></i>
                            <h2 class="text-2xl font-semibold text-gray-700 mb-2">设备管理</h2>
                            <p class="text-gray-500">管理物联网设备，监控设备状态</p>
                            <p class="text-sm text-gray-400 mt-2">此功能正在开发中...</p>
                        </div>
                    </div>
                `;
                
            } else if (page === 'realtime') {
                // 加载实时数据页面
                contentArea.innerHTML = `
                    <div class="max-w-7xl mx-auto fade-in">
                        <div class="text-center py-12">
                            <i class="fas fa-chart-line text-6xl text-gray-300 mb-4"></i>
                            <h2 class="text-2xl font-semibold text-gray-700 mb-2">实时数据</h2>
                            <p class="text-gray-500">查看设备实时数据监控</p>
                            <p class="text-sm text-gray-400 mt-2">此功能正在开发中...</p>
                        </div>
                    </div>
                `;
                
            } else if (page === 'history') {
                // 加载历史数据查询页面
                contentArea.innerHTML = `
                    <div class="max-w-7xl mx-auto fade-in">
                        <div class="text-center py-12">
                            <i class="fas fa-history text-6xl text-gray-300 mb-4"></i>
                            <h2 class="text-2xl font-semibold text-gray-700 mb-2">历史数据查询</h2>
                            <p class="text-gray-500">查询和分析历史数据</p>
                            <p class="text-sm text-gray-400 mt-2">此功能正在开发中...</p>
                        </div>
                    </div>
                `;
                
            } else if (page === 'charts') {
                // 加载数据图表页面
                contentArea.innerHTML = `
                    <div class="max-w-7xl mx-auto fade-in">
                        <div class="text-center py-12">
                            <i class="fas fa-chart-bar text-6xl text-gray-300 mb-4"></i>
                            <h2 class="text-2xl font-semibold text-gray-700 mb-2">数据图表</h2>
                            <p class="text-gray-500">数据可视化图表分析</p>
                            <p class="text-sm text-gray-400 mt-2">此功能正在开发中...</p>
                        </div>
                    </div>
                `;
                
            } else {
                // 默认首页内容
                contentArea.innerHTML = `
                    <div class="max-w-7xl mx-auto">
                        <!-- 欢迎区域 -->
                        <div class="gradient-bg rounded-2xl p-8 text-white mb-8">
                            <div class="flex items-center justify-between">
                                <div>
                                    <h1 class="text-4xl font-bold mb-4">欢迎使用物联网数据平台</h1>
                                    <p class="text-xl text-blue-100 mb-6">实时监控、智能分析、数据驱动决策</p>
                                    <div class="flex space-x-4">
                                        <button class="bg-white bg-opacity-20 hover:bg-opacity-30 px-6 py-3 rounded-lg transition-all duration-200 backdrop-blur-sm">
                                            <i class="fas fa-play mr-2"></i>快速开始
                                        </button>
                                        <button class="border border-white border-opacity-30 hover:bg-white hover:bg-opacity-10 px-6 py-3 rounded-lg transition-all duration-200">
                                            <i class="fas fa-book mr-2"></i>使用文档
                                        </button>
                                    </div>
                                </div>
                                <div class="hidden lg:block">
                                    <i class="fas fa-microchip text-8xl text-white text-opacity-20"></i>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 统计卡片 -->
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                            <div class="gradient-bg rounded-xl p-6 text-white">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="text-blue-100 text-sm">总用户数</p>
                                        <p class="text-3xl font-bold">156</p>
                                    </div>
                                    <div class="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
                                        <i class="fas fa-users text-2xl"></i>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="gradient-bg-secondary rounded-xl p-6 text-white">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="text-pink-100 text-sm">在线设备</p>
                                        <p class="p-3xl font-bold">89</p>
                                    </div>
                                    <div class="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
                                        <i class="fas fa-hdd text-2xl"></i>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="gradient-bg-success rounded-xl p-6 text-white">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="text-cyan-100 text-sm">传感器</p>
                                        <p class="text-3xl font-bold">342</p>
                                    </div>
                                    <div class="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
                                        <i class="fas fa-sliders-h text-2xl"></i>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="gradient-bg-warning rounded-xl p-6 text-white">
                                <div class="flex items-center justify-between">
                                    <div>
                                        <p class="text-green-100 text-sm">数据记录</p>
                                        <p class="text-3xl font-bold">1.2M</p>
                                    </div>
                                    <div class="w-12 h-12 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
                                        <i class="fas fa-chart-line text-2xl"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 功能模块 -->
                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                            <div class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow">
                                <div class="text-center">
                                    <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                                        <i class="fas fa-users text-2xl text-blue-600"></i>
                                    </div>
                                    <h3 class="text-xl font-semibold text-gray-800 mb-2">用户管理</h3>
                                    <p class="text-gray-600 mb-4">管理系统用户，设置权限和角色</p>
                                    <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg transition-colors" onclick="loadContent('user')">
                                        进入管理
                                    </button>
                                </div>
                            </div>
                            
                            <div class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow">
                                <div class="text-center">
                                    <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
                                        <i class="fas fa-sliders-h text-2xl text-green-600"></i>
                                    </div>
                                    <h3 class="text-xl font-semibold text-gray-800 mb-2">传感器参数</h3>
                                    <p class="text-gray-600 mb-4">配置传感器参数和阈值设置</p>
                                    <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg transition-colors" onclick="loadContent('sensor')">
                                        进入管理
                                    </button>
                                </div>
                            </div>
                            
                            <div class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow">
                                <div class="text-center">
                                    <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
                                        <i class="fas fa-hdd text-2xl text-purple-600"></i>
                                    </div>
                                    <h3 class="text-xl font-semibold text-gray-800 mb-2">设备管理</h3>
                                    <p class="text-gray-600 mb-4">管理物联网设备，监控设备状态</p>
                                    <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg transition-colors" onclick="loadContent('device-list')">
                                        进入管理
                                    </button>
                                </div>
                            </div>
                            
                            <div class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow">
                                <div class="text-center">
                                    <div class="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-4">
                                        <i class="fas fa-chart-bar text-2xl text-orange-600"></i>
                                    </div>
                                    <h3 class="text-xl font-semibold text-gray-800 mb-2">数据管理</h3>
                                    <p class="text-gray-600 mb-4">查看实时数据，分析历史趋势</p>
                                    <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg transition-colors" onclick="loadContent('realtime')">
                                        进入管理
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                `;
            }
            
            // 添加淡入动画
            contentArea.classList.remove('content-fade-in');
            setTimeout(() => {
                contentArea.classList.add('content-fade-in');
            }, 10);
        }
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 检查登录状态
            checkLoginStatus();
            
            // 默认展开所有菜单
            document.querySelectorAll('[id$="-menu"]').forEach(menu => {
                menu.style.display = 'block';
            });
            
            // 默认旋转所有箭头
            document.querySelectorAll('[id$="-arrow"]').forEach(arrow => {
                arrow.style.transform = 'rotate(180deg)';
            });
        });
        
        // 检查登录状态
        function checkLoginStatus() {
            $.ajax({
                url: '/api/auth/check',
                method: 'GET',
                success: function(response) {
                    if (response.code === 200 && response.data.loggedIn) {
                        // 已登录，更新用户信息显示
                        updateUserInfo(response.data);
                    } else {
                        // 未登录，跳转到登录页面
                        window.location.href = '/login';
                    }
                },
                error: function() {
                    // 网络错误，跳转到登录页面
                    window.location.href = '/login';
                }
            });
        }
        
        // 更新用户信息显示
        function updateUserInfo(userData) {
            const usernameElement = document.querySelector('#userMenu .px-4.py-3 p:first-child');
            const roleElement = document.querySelector('#userMenu .px-4.py-3 p:last-child');
            
            if (usernameElement) {
                usernameElement.textContent = userData.realName || userData.username;
            }
            if (roleElement) {
                roleElement.textContent = userData.userRole || '系统管理员';
            }
        }
        
        // 用户管理相关变量
        let currentPage = 1;
        let pageSize = 10;
        let totalRecords = 0;
        let deleteUserId = null;
        
        // 加载用户列表
        function loadUsers(page = 1) {
            currentPage = page;
            const keyword = document.getElementById('searchKeyword') ? document.getElementById('searchKeyword').value : '';
            
            // 模拟API调用，实际项目中应该调用真实的API
            // 这里先显示模拟数据
            const mockUsers = [
                {
                    id: 1,
                    name: 'admin',
                    realName: '系统管理员',
                    email: 'admin@iot.com',
                    mobile: '13800138000',
                    status: 1,
                    createTime: '2024-01-15 10:00:00'
                },
                {
                    id: 2,
                    name: 'user001',
                    realName: '张三',
                    email: 'zhangsan@iot.com',
                    mobile: '13800138001',
                    status: 1,
                    createTime: '2024-01-16 14:30:00'
                },
                {
                    id: 3,
                    name: 'user002',
                    realName: '李四',
                    email: 'lisi@iot.com',
                    mobile: '13800138002',
                    status: 0,
                    createTime: '2024-01-17 09:15:00'
                }
            ];
            
            renderUserTable({ records: mockUsers, total: mockUsers.length, pages: 1 });
            renderPagination({ records: mockUsers, total: mockUsers.length, pages: 1 });
        }
        
        // 渲染用户表格
        function renderUserTable(data) {
            const tbody = document.getElementById('userTableBody');
            if (!tbody) return;
            
            tbody.innerHTML = '';
            
            if (data.records && data.records.length > 0) {
                data.records.forEach(function(user) {
                    const row = `
                        <tr class="table-row-hover">
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="flex items-center">
                                    <div class="flex-shrink-0 h-10 w-10">
                                        <div class="h-10 w-10 rounded-full bg-blue-500 flex items-center justify-center">
                                            <i class="fas fa-user text-white"></i>
                                        </div>
                                    </div>
                                    <div class="ml-4">
                                        <div class="text-sm font-medium text-gray-900">${user.name || '-'}</div>
                                        <div class="text-sm text-gray-500">${user.realName || '-'}</div>
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-900">${user.email || '-'}</div>
                                <div class="text-sm text-gray-500">${user.mobile || '-'}</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full ${user.status === 1 ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}">
                                    ${user.status === 1 ? '正常' : '禁用'}
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                ${user.createTime || '-'}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                <button onclick="editUser(${user.id})" class="text-blue-600 hover:text-blue-900 mr-3 transition-colors">
                                    <i class="fas fa-edit"></i> 编辑
                                </button>
                                <button onclick="deleteUser(${user.id})" class="text-red-600 hover:text-red-900 transition-colors">
                                    <i class="fas fa-trash"></i> 删除
                                </button>
                            </td>
                        </tr>
                    `;
                    tbody.innerHTML += row;
                });
            } else {
                tbody.innerHTML = `
                    <tr>
                        <td colspan="5" class="px-6 py-12 text-center text-gray-500">
                            <div class="flex flex-col items-center">
                                <i class="fas fa-users text-4xl text-gray-300 mb-3"></i>
                                <p class="text-lg">暂无用户数据</p>
                                <p class="text-sm">点击"添加用户"开始创建</p>
                            </div>
                        </td>
                    </tr>
                `;
            }
            
            totalRecords = data.total || 0;
            const totalRecordsElement = document.getElementById('totalRecords');
            if (totalRecordsElement) {
                totalRecordsElement.textContent = totalRecords;
            }
        }
        
        // 渲染分页
        function renderPagination(data) {
            const pagination = document.getElementById('pagination');
            if (!pagination) return;
            
            pagination.innerHTML = '';
            
            const totalPages = data.pages || 1;
            
            // 上一页
            const prevDisabled = currentPage <= 1 ? 'cursor-not-allowed opacity-50' : 'hover:bg-gray-50';
            pagination.innerHTML += `
                <button onclick="loadUsers(${currentPage - 1})" ${currentPage <= 1 ? 'disabled' : ''} 
                        class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 ${prevDisabled}">
                    <i class="fas fa-chevron-left"></i>
                </button>
            `;
            
            // 页码
            for (let i = 1; i <= totalPages; i++) {
                if (i === currentPage) {
                    pagination.innerHTML += `
                        <span class="relative inline-flex items-center px-4 py-2 border border-blue-500 bg-blue-50 text-sm font-medium text-blue-600">
                            ${i}
                        </span>
                    `;
                } else {
                    pagination.innerHTML += `
                        <button onclick="loadUsers(${i})" 
                                class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                            ${i}
                        </button>
                    `;
                }
            }
            
            // 下一页
            const nextDisabled = currentPage >= totalPages ? 'cursor-not-allowed opacity-50' : 'hover:bg-gray-50';
            pagination.innerHTML += `
                <button onclick="loadUsers(${currentPage + 1})" ${currentPage >= totalPages ? 'disabled' : ''} 
                        class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 ${nextDisabled}">
                    <i class="fas fa-chevron-right"></i>
                </button>
            `;
        }
        
        // 搜索用户
        function searchUsers() {
            loadUsers(1);
        }
        
        // 清除搜索
        function clearSearch() {
            const searchInput = document.getElementById('searchKeyword');
            if (searchInput) {
                searchInput.value = '';
            }
            loadUsers(1);
        }
        
        // 显示添加用户模态框
        function showAddUserModal() {
            alert('添加用户功能正在开发中...');
        }
        
        // 编辑用户
        function editUser(userId) {
            alert('编辑用户功能正在开发中...');
        }
        
        // 删除用户
        function deleteUser(userId) {
            if (confirm('确定要删除这个用户吗？')) {
                alert('删除用户功能正在开发中...');
            }
        }
        
        // 导出用户数据
        function exportUsers() {
            alert('导出功能正在开发中...');
        }
        
        // 用户登出
        function logout() {
            if (confirm('确定要退出登录吗？')) {
                $.ajax({
                    url: '/api/auth/logout',
                    method: 'POST',
                    success: function(response) {
                        if (response.code === 200) {
                            // 登出成功，跳转到登录页面
                            window.location.href = '/login';
                        } else {
                            alert('退出失败：' + response.message);
                        }
                    },
                    error: function() {
                        alert('网络错误，请稍后重试');
                    }
                });
            }
        }
    </script>
</body>
</html>
